<!-- <div class="row">
  <p class="col-md-5 lead"></p>
</div> -->

<div class="row">
  <div class="col-md-6">
    <div className="btn-group-justified">
      <div class="btn-group" role="group">
        <select id="menucollections" ng-model="ctrl.collection"
          ng-options="item.name as item.name for item in ctrl.collections" ng-change="ctrl.SelectCollection()">
        </select>
      </div>

    </div>
  </div>
  <div class=" col-md-6 text-right" id="entitiestools">
    <em class="fas fa-cog fa-spin" ng-show="ctrl.loading==true" title="Hang on, loading data"></em>
    <input type="checkbox" id="checkbox-1" ng-model="ctrl.skipcustomerfilter" ng-change="ctrl.Search()"
      ng-show="menuctrl.WebSocketClientService.multi_tenant">
    <label for="checkbox-1" ng-show="menuctrl.WebSocketClientService.multi_tenant"><span translate lib="web">show
        all</span></label>
    <span ng-show="ctrl.collection == 'openrpa_instances'">
      <input type="checkbox" id="checkbox-2" ng-model="ctrl.showrunning" ng-change="ctrl.loadData()">
      <label for="checkbox-2"><span translate lib="web">running</span></label>
    </span>
    <span ng-show="ctrl.collection == 'config'">
      <input type="checkbox" id="checkbox-3" ng-model="ctrl.showpending" ng-change="ctrl.loadData()">
      <label for="checkbox-3"><span translate lib="web">pending</span></label>
    </span>

    <a ng-href="#/Deleted/{{ctrl.collection}}" class="btn btn-info" ng-show="ctrl.loading == false"
      title="Show deleted items, if history is not disabled for this collection"><em
        class="fas fa-undo"></em></a>
    <em class="fas fa-undo btn disabled" ng-show="ctrl.loading == true"></em>
    <a ng-href="#/Duplicates/{{ctrl.collection}}" class="btn btn-info" ng-show="ctrl.loading == false"
      title="Open duplicates detection interface"><em
        class="fas fa-clone"></em></a>
    <em class="fas fa-clone btn disabled" ng-show="ctrl.loading == true"></em>
    <a ng-href="#/Entity/{{ctrl.collection}}" class="btn btn-info" ng-show="ctrl.loading == false"
      title="Add new item to this collection"><em
        class="fas fa-plus"></em></a>
    <em class="fas fa-plus btn disabled" ng-show="ctrl.loading == true"></em>
  </div>
</div>

<div ng-show="ctrl.errormessage != ''"" class=" alert alert-danger" role="alert">{{ctrl.errormessage}}</div>

<table style="border-collapse: collapse; table-layout: fixed;" id=" table1" class="table table-striped table-hover table-sm" when-scrolled="ctrl.more()" 
style="width: 100%;" aria-label="List items in seletected collection">
  <thead class="thead-dark">
    <tr>
      <th scope="col" ng-click="ctrl.ToggleOrder('name')"><strong translate lib="web">name</strong></th>
      <th class="w-150" scope="col" ng-click="ctrl.ToggleOrder('_type')"><strong translate lib="web">type</strong></th>
      <th class="w-150" ng-click="ctrl.ToggleOrder('_createdby')"><strong translate lib="web">createdby</strong></th>
      <th class="w-100" scope="col" ng-click="ctrl.ToggleOrder('_created')"><strong translate lib="web">created</strong></th>
      <th class="w-100" scope="col" ng-click="ctrl.ToggleOrder('_modified')"><strong translate lib="web">updated</strong></th>
      <th class="w-200"></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="model in ctrl.models">
      <td class="text-truncate"><a style="color: inherit; text-decoration: inherit;" 
        ng-href="#/Entity/{{ctrl.collection}}/{{model._id}}">{{model.name}}</a></td>
      <td><span translate lib="web">{{model._type}}</span></td>
      <td class="text-truncate">{{model._createdby}}</td>
      <td class="text-truncate">
        <timesince ng-model="model._created" />
      </td>
      <td class="text-truncate">
        <timesince ng-model="model._modified" />
      </td>
      <td >
        <a ng-href="#/History/{{ctrl.collection}}/{{model._id}}" class="btn" ng-show="ctrl.loading == false"
          title="Show version hisotry for this item"><em
            class="fas fa-notes-medical"></em></a>
        <em class="fas fa-notes-medical btn disabled" ng-show="ctrl.loading == true"></em>
        <a ng-href="#/Entity/{{ctrl.collection}}/{{model._id}}" class="btn" ng-show="ctrl.loading == false"
          title="Edit this item"><em
            class="fas fa-edit"></em></a>
        <em class="fas fa-edit btn disabled" ng-show="ctrl.loading == true"></em>
        <a href ng-click="ctrl.DeleteOne(model)" ng-disabled="ctrl.loading==true" class="btn" title="Delete this item"
        ng-class="{'btn-danger': ctrl.shiftdown==true && ctrl.collection == 'users' && (model._type == 'user' || model._type == 'customer')}"
        ><em
            class="fas fa-trash"></em></a>
      </td>
    </tr>
  </tbody>
</table>